<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Carousel storyboard</title>

    <link rel="stylesheet" href="../../demos/demos.css" />
    <script type="module" src="./RenderState.js"></script>
    <script type="module" src="../../src/Carousel.js"></script>

    <style>
      body {
        padding: 3em 5em;
      }

      elix-carousel {
        background: #555;
        height: 170px;
        width: 220px;
      }

      elix-carousel .page {
        align-items: center;
        background: #ccc;
        border: 1px solid #888;
        box-sizing: border-box;
        color: white;
        display: flex;
        font-size: 128px;
        font-weight: bold;
        justify-content: center;
        -webkit-text-stroke: 2px #444;
      }
    </style>
  </head>

  <body>
    <h1>Carousel storyboard</h1>

    <p>
      All scenes show a Carousel with 4 items labeled "0", "1", "2", and "3".
    </p>

    <render-state>
      <elix-carousel slot="fixture">
        <div class="page">0</div>
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
      </elix-carousel>
      <p>
        On the first item, the first dot is selected, and the left arrow button
        is disabled.
      </p>
    </render-state>

    <render-state fixture-state='{"selectedIndex": 1, "swipeFraction": 0}'>
      <elix-carousel slot="fixture">
        <div class="page">0</div>
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
      </elix-carousel>
      <p>
        On items in the middle, both arrow buttons are enabled.
      </p>
    </render-state>

    <render-state fixture-state='{"selectedIndex": 3, "swipeFraction": 0}'>
      <elix-carousel slot="fixture">
        <div class="page">0</div>
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
      </elix-carousel>
      <p>
        On the last item, the right arrow button is disabled.
      </p>
    </render-state>

    <render-state>
      <elix-carousel slot="fixture" dir="rtl">
        <div class="page">0</div>
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
      </elix-carousel>
      <p>
        In right-to-left languages, items are ordered from right to left.
      </p>
    </render-state>
  </body>
</html>
